<template>
  <div v-if="data.length === 0" class="loading">
    <p>数据加载中...</p>
  </div>
  <div v-else class="weather-chart">
    <div class="chart-content">
      <div class="chart-background">
        <div class="weather-info">
          <ul>
            <li v-for="(item, index) in props.data" :key="item.date">
              <p>{{ getDate(item, index) }}</p>
              <p>{{ item.date.slice(-5) }}</p>
              <p>{{ getWeather(item) }}</p>
              <p>风力 {{ getWindPow(windPow) }}</p>
            </li>
          </ul>
        </div>

        <div class="chart">
          <v-chart :option="options"></v-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const options = ref({});
const dayArr = ref([]);
const nightArr = ref([]);
const windPow = ref('');
const hour = new Date().getHours();
// console.log(props.data);

const getDate = (date, index) => {
  if (index === 0) {
    return '今天';
  }
  if (index === 1) {
    return '明天';
  } else {
    return date.week;
  }
};

const getWindPow = (windPow) => {
  if (windPow === '微风') {
    return '1-3级';
  }
  return windPow;
};

const getWeather = (item) => {
  if (hour >= 18 || hour < 6) {
    return item.night.weather;
  }
  return item.day.weather;
};

const renderWeatherChart = () => {
  dayArr.value = props.data.map((item) => item.day.temperature);
  nightArr.value = props.data.map((item) => item.night.temperature);
  if (hour >= 18 || hour < 6) {
    windPow.value = props.data[0].night.wind_power;
  } else {
    windPow.value = props.data[0].day.wind_power;
  }
  options.value = {
    xAxis: {
      type: 'category',
      show: false,
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      top: 50,
      left: 0,
      bottom: 0,
      right: 0,
    },
    series: [
      {
        name: '白天',
        data: dayArr.value,
        type: 'line',
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            return `白${params.value}℃`;
          },
          color: '#fff',
        },
      },
      {
        name: '夜晚',
        data: nightArr.value,
        type: 'line',
        label: {
          show: true,
          position: 'bottom',
          formatter: (params) => {
            return `晚${params.value}℃`;
          },
          color: '#fff',
        },
      },
    ],
  };
};

onMounted(() => {
  renderWeatherChart();
});
</script>

<style lang="scss" scoped>
$bg-color-l: #00668a; //背景颜色-浅
$bg-color-d: #004e71; //背景颜色-深
$font-color-w: #fff; //字体颜色-白

.loading {
  padding-top: 20px;
  width: 100%;
  height: 100dvh;
  font-size: 20px;
  color: $font-color-w;
  text-align: center;
}

.weather-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $bg-color-l;
  width: 100%;
  .chart-content {
    margin-bottom: 80px;
    padding: 0 100px;
    width: 1024px;
    background-color: $bg-color-l;
    p {
      color: $font-color-w;
      margin-bottom: 20px;
    }
    .chart-background {
      background-color: $bg-color-d;

      border-radius: 5px;
      .weather-info ul {
        display: flex;
        justify-content: space-between;
        padding: 40px;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          width: 150px;
        }
      }
      .chart {
        height: 240px;
      }
    }
  }
}
</style>
